{% extends 'base/base.html' %}

{% block title %}
{{ title }}
{% endblock %}

{% block link %}
    <link rel="stylesheet" href="../../static/css/base/reset.css">
  <link rel="stylesheet" href="../../static/css/base/common.css">
  <link rel="stylesheet" href="../../static/css/authPro/auth.css">
  <link rel="stylesheet" href="../../static/css/news/index.css">
  <link rel="stylesheet" href="http://at.alicdn.com/t/font_684044_un7umbuwwfp.css">
{% endblock %}




{% block main %}
    <div class="zt">       <!--与浏览器对其的主体内容框-->
    <!--内容主体-->
    <div class="zhuti">
    {% block main_left %}
        <!--模块1，左侧-->
        <div id="mokuai1">
            <!--轮播图-->
            <div id="img_4">
                <ul class="class_new">

                </ul>
                <!--2个箭头-->
                <!--点击事件调用函数-->
                <span id=left style="font-size: 80px;float: left" onclick="left()">&lt;</span>
                <span id=right style="float: right;font-size: 80px" onclick="right()">&gt;</span>
                <!--4个原点-->
                <ul class="tab">
                    <li class="li1"> </li>
                    <li class="li1"> </li>
                    <li class="li1"> </li>
                    <li class="li1"> </li>
                </ul>

            </div>
            <!--栏目图-->
            <div id="img_3">
                <ul>
                    <li style="position:relative;">
                        <a href="javascript:void(0)">
                            <img src="https://res.shiguangkey.com//file/201806/04/20180604235838752491899.png!mall_course_a" alt="提取错误">
                                <!--<div class="lanmu1" style="position:absolute; z-index:2; left:50px; top:150px">-->
                                    <!--人生苦短，我用python-->
                                <!--</div>-->
                        </a>
                        <a href="javascript:void (0)">
                            <p>SEO优化，最新快速排名技巧解答分享</p>
                        </a>
                    </li>
                    <li style="position:relative;">
                        <a href="javascript:void(0)">
                            <img src="https://res.shiguangkey.com//file/201805/26/20180526105323340886406.png!mall_course_c" alt="提取错误">
                                <!--<div class="lanmu1" style="position:absolute; z-index:2; left:50px; top:150px">-->
                                    <!--人生苦短，我用python-->
                                <!--</div>-->
                        </a>
                        <a href="javascript:void (0)">
                            <p>web前端零基础入门</p>
                        </a>
                    </li>
                    <li style="position:relative;">
                        <a href="javascript:void(0)">
                            <img src="https://res.shiguangkey.com//file/201805/03/20180503165311843004082.png!mall_course_c" alt="提取错误">
                                <!--<div class="lanmu1" style="position:absolute; z-index:2; left:50px; top:150px">-->
                                    <!--人生苦短，我用python-->
                                <!--</div>-->
                        </a>
                        <a href="javascript:void (0)">
                            <p>韩语小白变大神</p>
                        </a>
                    </li>
                </ul>
            </div>
            <!--选项栏目-->
            <div id="Column-4">
                <ul>
                    <li class="news-item active"><a href="javascript:void(0)">最新资讯</a></li>
                    {% for i in tags %}
                    <li class="news-item "><a  href="javascript:void (0)" data-id={{ i.id }}>{{ i.name }}</a></li>
                    {% endfor %}
{#                    <li class="news-item"><a  href="javascript:void (0)">java</a></li>#}
{#                    <li class="news-item"><a  href="javascript:void (0)">python</a></li>#}
{#                    <li class="news-item"><a  href="javascript:void (0)">c++</a></li>#}
{#                    <li class="news-item"><a  href="javascript:void (0)">自然语言</a></li>#}

                </ul>

            </div>
            <!--栏目列表-->
            <div id="Column-list">
                <ul style="position: relative">
                    <!--最新资讯-->
                    <li id="最新资讯" style="position: absolute" class="=c-list">
                        <!--第一条信息-->
                        <div class="list-1" style="position: relative">
                            <a href="https://www.shiguangkey.com/course/2432" class="news-thumbnail"
                         target="_blank">
                            <img src="../../static/images/linux.jpg" alt="linux查找文件或目录命令"
                               title="linux查找文件或目录命令">
                            </a>
                            <span style="position: absolute">
                                 <ul>
                                    <li style="font-size: 30px;padding-bottom:40px"><a href="javascript:void(0)">linux查找文件或目录命令</a></li>
                                    <li><a href="javascript:void(0)">linux查找文件或目录命令，前提：知道文件或者目录的具体名字，例如：sphinx.conffind 查找find / -name
                              dirname 查找目录find -name...</a></li>
                                </ul>

                                <div class="news-other">
                                    <span class="news-type">Linux教程</span>
                                    <span class="news-time">11/11 18:24</span>
                                    <span class="news-author">python</span>
                                </div>
                            </span>
                      </div>
                        <!--第二条信息-->
                        <div class="list-1">
                            <a href="https://www.shiguangkey.com/course/2432" class="news-thumbnail"
                         target="_blank">
                          <img src="../../static/images/linux.jpg" alt="实现linux和windows文件传输"
                               title="实现linux和windows文件传输">
                      </a>
                            <span style="position: absolute">
                                <ul>
                                    <li style="font-size: 30px;padding-bottom:40px"><a href="javascript:void(0)">实现linux和windows文件传输</a></li>
                                    <li><a href="javascript:void(0)">其实这个题目有点大，这里介绍的只是linux和windows文件传输中的一种，但是这种方法却非常实用，那就是：ZModem协议具体是linux命令是：rz...</a></li>
                                </ul>
                                <div class="news-other">
                                    <span class="news-type">Linux教程</span>
                                    <span class="news-time">11/11 18:24</span>
                                    <span class="news-author">python</span>
                                </div>
                            </span>
                        </div>
                    </li>
                    <!--自然语言-->
                    <li id ='自然语言' style="position: absolute" class="c-list hide">
                        <!--第一条信息-->
                        <div class="list-1" style="position: relative">
                            <img src="https://res.shiguangkey.com//file/201805/03/20180503165311843004082.png!mall_course_a" alt="韩语小白变大神">
                            <span style="position: absolute">
                                <ul>
                                    <li>可里:<a href="javascript:void(0)">大学韩国语专业 亚篮锦标赛韩语随同翻译 3年线上韩语教育经验</a></li>
                                    <li>小美:<a href="javascript:void(0)">大学韩语专业 韩语TOPIK6级 三年线上教学经验</a></li>
                                    <li>鸭梨:<a href="javascript:void(0)">大学韩国语专业 2年线上韩语教学经验 多年韩国漫画翻译经验</a></li>
                                    <li>可可:<a href="javascript:void(0)">韩语随同翻译 牙科医疗反映 丰富口译经验 多年爱豆站姐翻译经验</a></li>
                                </ul>
                            </span>
                        </div>
                        <!--第二条信息-->
                        <div class="list-1">
                            <img src="https://res.shiguangkey.com//file/201807/23/20180723165649433839624.png!mall_course_a" alt="零基础轻松学英语">
                            <span style="position: absolute">
                                <ul>
                                    <li>Celin:<a href="javascript:void(0)">零基础的人可以报一家英语培训班来学习英语,也可以通过自学。</a></li>
                                    <li>Molly:<a href="javascript:void(0)">熟读音标,音标是英语的基础,熟读音标之后,要多读单词,积累词汇量。</a></li>
                                    <li>Zoey:<a href="javascript:void(0)">阅读英语课文的同时要多看英语语法书,了解英语结构。</a></li>
                                    <li>百科:<a href="javascript:void(0)">自然语言处理是人工智能中最为困难的问题之一,而对自然语言处理的研究也是充满魅力和挑战的。</a></li>
                                </ul>
                            </span>
                        </div>
                    </li>
                    <!--java-->
                    <li id ='java' style="position: absolute"  class="c-list hide">
                        <!--第一条信息-->
                        <div class="list-1" style="position: relative">
                            <img src="../../static/images/java2.jpg" alt="javascript">
                            <span style="position: absolute">
                                <ul>
                                    <li>JOJO:<a href="javascript:void(0)">从API到复杂微服务场景，实战部署中小企业可落地的完整安全方案。</a></li>
                                    <li>Geely:<a href="javascript:void(0)">从0开始 独立完成企业级Java电商网站服务端开发(长期维护)</a></li>
                                    <li>ccmouse:<a href="javascript:void(0)">Google面试官亲授-Java面试新手尊享课</a></li>
                                    <li>Allen:<a href="javascript:void(0)">应用Dubbo框架打造仿猫眼项目 理解微服务核心思想</a></li>
                                </ul>
                            </span>
                        </div>
                        <!--第二条信息-->
                        <div class="list-1">
                            <img src="../../static/images/JAVA.jpg" alt="java从入门都精通">
                            <span style="position: absolute">
                                <ul>
                                    <li>SSM:<a href="javascript:void(0)">旨在通过掌握SSM框架完成主流业务的编程实战,掌握第一阶段课程内容,可基本实现SSM框架项目开发能力</a></li>
                                    <li>Spring Boot:<a href="javascript:void(0)">此阶段围绕SpringBoot框架进行学习,在不同角度、不同类型的项目中掌握SpringBoot开发的原理和应用</a></li>
                                    <li>pringCloud&Dubbo:<a href="javascript:void(0)">从热点应用、核心剖析到容器化实践,多角度理解Java微服务。</a></li>
                                </ul>
                            </span>
                        </div>
                    </li>
                    <!--python-->
                    <li id ='python' style="position: absolute"  class="c-list hide">
                        <!--第一条信息-->
                        <div class="list-1" style="position: relative">
                            <img src="../../static/images/python.jpg" alt="python基础">
                            <span style="position: absolute">
                                <ul>
                                    <li>Python语法:<a href="javascript:void(0)">Python语法基础入门+初级实战强化训练；从理论到实践，牢牢掌握Python语法</a></li>
                                    <li>Web之Django框架:<a href="javascript:void(0)">Python最主流的Django框架实战项目强化训练,帮你成为多面能手</a></li>
                                    <li>Python高薪:<a href="javascript:void(0)">最后阶段的学习均为python高级开发教程，涵盖Python高级语法和高级开发实战，高薪工作纷至沓来！</a></li>
                                </ul>
                            </span>
                        </div>
                        <!--第二条信息-->
                        <div class="list-1">
                            <img src="../../static/images/python2.jpg" alt="python0基础到项目">
                            <span style="position: absolute">
                                <ul>
                                    <li>bobby:<a href="javascript:void(0)">强力Django2.2+ 杀手级xadmin开发在线教育网站</a></li>
                                    <li>Jack:<a href="javascript:void(0)">Django开发企业实战  面向就业/升职（中高级教程）</a></li>
                                    <li>Oscar:<a href="javascript:void(0)">基于Python玩转人工智能最火框架 TensorFlow应用实践</a></li>
                                    <li>Jeson:<a href="javascript:void(0)">Python+Django+Ansible Playbook自动化运维项目实战</a></li>
                                </ul>
                            </span>
                        </div>
                    </li>
                    <!--c++-->
                    <li id ='c加加' style="position: absolute"  class="c-list hide">
                         <!--第一条信息-->
                        <div class="list-1" style="position: relative">
                            <img src="../../static/images/C++.jpg" alt="c++基础到大型项目">
                            <span style="position: absolute">
                                <ul>
                                    <li>七月:<a href="javascript:void(0)">Java全栈工程师：从Java后端到全栈，高级电商全栈系统大课</a></li>
                                    <li>超梨:<a href="javascript:void(0)">百万级高并发WebRTC流媒体服务器设计与开发</a></li>
                                </ul>
                            </span>
                        </div>
                        <!--第二条信息-->
                        <div class="list-1">
                            <img src="../../static/images/c++1.jpg" alt="c++">
                            <span style="position: absolute">
                                <ul>
                                    <li>Ceeunin:<a href="javascript:void(0)">为面试新手量身定制的Java面试尊享课，解锁“鲤鱼跃龙门”的妙招</a></li>
                                    <li>Mobobo:<a href="javascript:void(0)">玩转算法面试-- Leetcode真题分门别类讲解。</a></li>
                                </ul>
                            </span>
                        </div>
                    </li>
                </ul>
            </div>
            <!--加载更多-->
            <div id="jiazai">
                <button class="btn-more">加载更多</button>
            </div>
        </div>
    {% endblock %}
    {% block main_regin %}
        <!--模块2，右侧-->
        <div id="mokuai2" style="position: relative">
            <p id="aa">
                <span>公开课<a href="javascript:void (0)">更多</a></span>
            </p>
            <video src="https://video1999.cdn.bcebos.com/%E9%AB%98%E9%AB%98%E9%A3%9E%E8%B5%B7.mp4" controls="controls" height="235px" width="380px">

            </video>
            <p id="bb"><span>报名中</span>&emsp;潭州课堂python基础开班了</p>
            <p id="cc"><span>已结束</span>&emsp;潭州日语课程已结束</p>
            <hr style="color: black">
            <p id="aa">
                <span>在线课堂<a href="javascript:void (0)">更多</a></span>
            </p>
            <img src="../../static/images/3D.jpg" alt="提取错误">
            <p id="bb"><span>报名中</span>&emsp;现在报名Unity 3D优惠了</p>

            <hr style="color: black">

            <p id="aa">
                <span style="font-size: 24px">关注我</span>
            </p>
            <div id="dd">
               <p><i class="iconfont icon-zhihu" style="font-size: 30px"></i><span>&emsp;我最帅</span></p>

               <p><i class="iconfont icon-weibo" style="font-size: 30px"></i><span>&emsp;我帅的自己都失神了</span></p>
            </div>
            <div id="ss">
                <img src="../../static/images/0.jpg" alt="">
            </div>

        </div>
    {% endblock %}
    </div>
</div>

{% endblock %}

{% block script %}
    <script src="../../static/js/设置.js"></script>
{% endblock %}
